import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class YJRadio<T> extends StatefulWidget {
  YJRadio({
    Key? key,
    required this.value,
    required this.groupValue,
    required this.onChanged,
    this.size = 18,
    this.type = YJRadioType.basic,
    this.radioColor = YJColors.SUCCESS,
    this.activeBgColor = YJColors.WHITE,
    this.inactiveBgColor = YJColors.WHITE,
    this.activeBorderColor = YJColors.DARK,
    this.inactiveBorderColor = YJColors.DARK,
    this.activeIcon,
    this.inactiveIcon,
    this.customBgColor = YJColors.SUCCESS,
    this.autofocus = false,
    this.focusNode,
    this.toggleable = false,
    this.validator,
  }) : super(key: key);

  ///  类型，分为基本、方形、圆形和自定义
  final YJRadioType type;

  /// double 类型，即 GFSize 中的小、中和大，也可以任何double值
  final double size;

  /// 单选按钮中心圆点的颜色
  final Color radioColor;

  ///选中状态的背景颜色
  final Color activeBgColor;

  ///未选中时的背景颜色
  final Color inactiveBgColor;

  ///选中状态的边框颜色
  final Color activeBorderColor;

  ///未选中时的边框颜色
  final Color inactiveBorderColor;

  ///当用户选中或取消单选按钮时调用
  final ValueChanged<T>? onChanged;

  ///Widget 类型，用于更改选中按钮的图标，自定义类型下生效
  Widget? activeIcon;

  ///Widget 类型，用于更改未选中按钮的图标，自定义类型下生效
  final Widget? inactiveIcon;

  ///更改自定义类型下的背景颜色
  final Color customBgColor;

  /// 若当前范围内没有其他节点处于焦点时，是否将此组件选为初始焦点
  final bool autofocus;

  /// 一个可选的焦点节点，用作此小部件的焦点节点。
  final FocusNode? focusNode;

  /// 此单选按钮对应的值
  final T value;

  ///组单选按钮的当前选定值。 如果单选按钮的 value 与 groupValue 匹配，则认为单选按钮被选中
  final T groupValue;

  /// 是否设置单选按钮值，默认 false
  final bool toggleable;

  final FormFieldValidator<T>? validator;

  @override
  _YJRadioState<T> createState() => _YJRadioState<T>();
}

class _YJRadioState<T> extends State<YJRadio<T>> with TickerProviderStateMixin {
  bool get enabled => widget.onChanged != null;
  bool selected = false;
  T? groupValue;

  void onStatusChange() {
    groupValue = widget.value;
    _handleChanged(widget.value == groupValue);
  }

  void _handleChanged(bool selected) {
    if (selected) {
      widget.onChanged!(widget.value);
    }
  }

  getActiveIcon() {
    return widget.activeIcon != null
        ? widget.activeIcon
        : Icon(
            Icons.check,
            size: widget.size - YJSize.dp(3),
            color: YJColors.DARK,
          );
  }

  @override
  Widget build(BuildContext context) => FormField<T>(
      validator: widget.validator,
      builder: (state) {
        selected = widget.value == widget.groupValue;
        return Column(children: [
          InkWell(
              borderRadius: widget.type == YJRadioType.basic &&
                      widget.type == YJRadioType.blunt
                  ? BorderRadius.circular(50)
                  : widget.type == YJRadioType.square
                      ? BorderRadius.circular(0)
                      : BorderRadius.circular(10),
              enableFeedback: enabled,
              onTap: () {
                onStatusChange();
                state.didChange(widget.value);
              },
              child: Container(
                  height: widget.size,
                  width: widget.size,
                  decoration: BoxDecoration(
                      color: selected
                          ? widget.activeBgColor
                          : widget.inactiveBgColor,
                      borderRadius: widget.type == YJRadioType.basic
                          ? BorderRadius.circular(50)
                          : widget.type == YJRadioType.square
                              ? BorderRadius.circular(0)
                              : BorderRadius.circular(10),
                      border: Border.all(
                          color: selected
                              ? widget.activeBorderColor
                              : widget.inactiveBorderColor)),
                  child: selected
                      ? widget.type == YJRadioType.basic ||
                              widget.type == YJRadioType.square
                          ? Stack(
                              children: <Widget>[
                                Container(
                                  alignment: Alignment.center,
                                ),
                                Container(
                                  margin: const EdgeInsets.all(5),
                                  alignment: Alignment.center,
                                  width: widget.size * 0.7,
                                  height: widget.size * 0.7,
                                  decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: widget.radioColor),
                                )
                              ],
                            )
                          : widget.type == YJRadioType.blunt
                              ? Stack(
                                  children: <Widget>[
                                    Container(
                                      alignment: Alignment.center,
                                    ),
                                    Container(
                                      margin: const EdgeInsets.all(5),
                                      alignment: Alignment.center,
                                      width: widget.size * 0.8,
                                      height: widget.size * 0.8,
                                      decoration: BoxDecoration(
                                          borderRadius: const BorderRadius.all(
                                              Radius.circular(50)),
                                          color: widget.customBgColor),
                                    )
                                  ],
                                )
                              : widget.type == YJRadioType.custom
                                  ? widget.activeIcon
                                  : widget.inactiveIcon
                      : widget.inactiveIcon)),
          state.hasError
              ? Text(
                  state.errorText!,
                  style: TextStyle(color: Theme.of(context).colorScheme.error),
                )
              : Container(),
        ]);
      });
}
